<template>
	<view class="stock-funds oh">
		<view class="module1">
			<view class="flex-space-between">
				<view class="title">存量类型占比</view>
				<view class="unit">(单位 %)</view>
			</view>
			
			<view style="height: 350rpx;">
				<qiun-data-charts type="ring" :opts="pieOpts" :chartData="pieChartData" />
			</view>
			
			<view class="data-stat flex-space-between flex-wrap">
				<view v-for="(item, index) in dataStat" :key="index" class="data-stat-item flex-align" :style="{ '--color': pieOpts.color[index] }">
					<view class="label">{{ item.name }}</view>
					<view class="value">{{ item.value }}</view>
					<view class="increase" v-if="item.increase" :style="{ '--bg': `url(${assetsPath}b7f9bfe230db2cdd2c887274ef3ef961b466fde4.png) left top/100% 100% no-repeat` }">{{ item.increase }}</view>
					<view class="decrease" v-else-if="item.decrease" :style="{ '--bg': `url(${assetsPath}323696bb4832df8e0659a85c2c95e9bf5c6e7d69.png) left top/100% 100% no-repeat` }">{{ item.decrease }}</view>
				</view>
			</view>
		</view>
		
		<view class="module2">
			<van-dropdown-menu>
				<van-dropdown-item :value="value1" :options="option1" />
				<van-dropdown-item :value="value2" :options="option2" />
			</van-dropdown-menu>
			
			<view class="top flex-space-between">
				<view class="title">预售存量报表</view>
				<view class="date">2020.08.03</view>
			</view>
			
			<view class="table text-center">
				<view class="thead">
					<view class="tr d-flex">
						<view class="th">产品名称</view>
						<view class="th">单价</view>
						<view class="th">单日入账金额</view>
						<view class="th">存量金额</view>
					</view>
				</view>
				<view class="tbody">
					<view class="tr d-flex" v-for="(item, index) in tableData" :key="index">
						<view class="td ellipsis-1">{{ item.a }}</view>
						<view class="td ellipsis-1">{{ item.b }}</view>
						<view class="td ellipsis-1">{{ item.c }}</view>
						<view class="td ellipsis-1">{{ item.d }}</view>
					</view>
					<view class="tr d-flex red">
						<view class="td ellipsis-1">合计</view>
						<view class="td ellipsis-1">￥2000.00</view>
						<view class="td ellipsis-1">￥2000.00</view>
						<view class="td ellipsis-1">￥2000.00</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const data = [
			{ name: '储值卡', value: 42, increase: '5%' },
			{ name: '计次卡', value: 26, decrease: '13%' },
			{ name: '时间卡', value: 18, increase: '7%' },
			{ name: '记点卡', value: 14, increase: '8%' },
		];
		
		return {
			assetsPath: this.$https.assetsPath,
			pieOpts: {
				"title": {
					"name": "¥82500",
					"fontSize": 36 / 2,
					"color": "rgb(51,51,51)"
				},
				"subtitle": {
					"name": "总存量",
					"fontSize": 10,
					"color": "rgb(51,51,51)"
				},
				color: ['rgb(254,207,75)', 'rgb(69,153,252)', 'rgb(254,106,108)', 'rgb(2,196,169)'],
				extra: {
					ring: {
						borderWidth: 1,
						ringWidth: 20,
					}
				},
				legend: {
					show: false
				},
			},
			pieChartData: {
				series: [{
					data
				}]
			},
			dataStat: data,
			option1: [
			    { text: '今日', value: 'today' },
			    { text: '本周', value: 'week' },
			    { text: '本月', value: 'month' },
			    { text: '本年', value: 'year' },
			],
			option2: [
			    { text: '筛选', value: 'a' },
			],
			value1: 'today',
			value2: 'a',
			tableData: [
				{ a: '500元储值金额卡', b: '￥2000.00', c: '￥12.00', d: '￥1006.00' },
				{ a: '游戏30次卡', b: '￥5.00', c: '￥0.00', d: '￥5.00' },
				{ a: '500羽毛球年卡', b: '￥888.00', c: '￥18.00', d: '￥706.00' },
			]
		}
	}
}
</script>

<style lang="scss" scoped>
.stock-funds {
	min-height: 100vh;
	background-color: rgb(246,246,246);
	padding-bottom: 40rpx;
	
	.module1 {
		margin: 30rpx;
		background-color: rgb(255,255,255);
		box-shadow: 0px 11rpx 19.44rpx 7.56rpx rgba(51,51,51,0.1);
		border-radius: 16rpx;
		padding: 40rpx 20rpx 30rpx;
		
		.title {
			font-size: 34rpx;
			line-height: 32rpx;
		}
		
		.unit {
			font-size: 20rpx;
			line-height: 20rpx;
		}
		
		.data-stat {
			font-size: 24rpx;
			row-gap: 40rpx;
			padding: 0 10rpx;
			
			.data-stat-item {
				width: 50%;
				&:nth-of-type(2n) {
					justify-content: flex-end;
				}
				
			}
			
			.label {
				&::before {
					content: '';
					margin-right: 14rpx;
					display: inline-block;
					width: 17rpx;
					height: 17rpx;
					border: 1px solid var(--color);
					transform: rotate(45deg);
				}
			}
			
			.value {
				margin-left: 26rpx;
			}
			
			.increase,
			.decrease {
				margin-left: 26rpx;
				
				&::before {
					content: '';
					margin-right: 3rpx;
					display: inline-block;
					width: 9rpx;
					height: 15rpx;
					background: var(--bg);
				}
			}
		}
	}
	
	.module2 {
		background-color: #fff;
		
		/deep/.van-dropdown-menu {
			box-shadow: none;
			height: 80rpx;
		}
		
		.top {
			padding: 30rpx 40rpx;
			
			.title {
				font-size: 30rpx;
				font-weight: 700;
			}
			
			.date {
				color: rgb(190,190,190);
				font-size: 24rpx;
				font-weight: 700;
			}
		}
		
		.table {
			line-height: 26px;
			font-size: 22rpx;
			
			.thead {
				background-color: rgb(248,248,248);
				color: rgb(153,153,153);
			}
			
			.tbody {
				font-weight: 700;
				
				.tr {
					&:nth-of-type(2n) {
						background-color: rgb(248,248,248);
					}
				}
			}
			
			.th,
			.td {
				width: 25%;
			}
		}
	}
}
</style>
